<template>
    <div>用户管理
      <table border="1">
        <thead>
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>工资</td>
          <td>电话</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td>{{user.salary}}</td>
          <td>{{user.phone}}</td>
          <td><a :href="'#/User/UserEdit?id='+user.id">修改</a>&nbsp;&nbsp;<button @click="deleteUser(user.id)">删除</button></td>
        </tr>
        </tbody>
      </table>
      <router-link to="/User/AddUser" tag="button">添加</router-link>
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
      name: "User",
      data(){
        return {
          users:[]
        }
      },
      methods:{
        findAll(){
          this.$http.get("http://localhost:8989/user/findAll").then((res)=>{
            if(res.data.status == true){
              this.users = res.data.data;
            }
          })
        },
        deleteUser(id){
          this.$http.get("http://localhost:8989/user/deleteUser?id="+id).then((res)=>{
            if(res.data.status == true){
              this.findAll();
              alert("删除成功！");
            }
          })
        }
      },
      created(){
        this.findAll()
      },
      watch:{
        $route:{
          handler(val,oldval){
            console.log(val);//新路由信息
            console.log(oldval);//老路由信息
            if(val.path == '/User'){
              this.findAll();
            }
          },
          // 深度观察监听
          deep: true
        }
      }
    }
</script>

<style scoped>

</style>
